<template>
  <div>
    <el-input type="textarea" :rows="5" v-model.lazy="jsonStr" placeholder="请输入json数组校验规则"></el-input>
    <el-button @click="updataRules">确认</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return { rules: [],jsonStr: '',isValid: true }
  },
  model: {
    event: 'change'
  },
  watch: {
    jsonStr(val) {
      try {
        const rules = yaml.load(val)
        if (Array.isArray(rules) && rules.length && rules.every(rule => typeof rule === 'object')) {
          this.rules = rules
          this.isValid = true
        } else this.isValid = false
      } catch (err) {
        // console.log('err',err)
        err && this.$message.error(err)
        this.isValid = false
      }

    }
  },
  props: { value: { default() { return [] } } },
  methods: {
    updataRules() {
      if (this.isValid) {
        this.$emit('change',this.rules)
        this.$message.success('rules 已更新')
      } else {
        this.$message.error('请输入正确的校验规则,配置参考 :[ {"required":true,"message":"请输入用户名","trigger":"blur"}]')
      }
    }
  }
}
</script>
<style scoped></style>
